
<!DOCTYPE html>
<html>

<head>
    <title>User Login</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href  = "css/bootstrap.min.css" rel ="stylesheet">
	<link href  = "css/bootstrap.min.css" rel ="stylesheet">
	<link rel="stylesheet" type="text/css" href="styles/tasks4.css" media="screen"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	
	<script src="js/bootstrap.js"></script>
	<script>
        $(document).ready(function() {
                    //alert("running script");
					//alert(document.cookie);
					
                 
				
                    $("#btnLogin").click(function() {
                            alert("clicked");
                            var loginName = document.getElementById("t_loginName").value;
                            var loginPass = document.getElementById("t_loginPass").value;
                            var dataObj = "loginName=" + loginName + "&" + "loginPass=" + loginPass;
                            //alert("Sending: " + dataObj);
							
							
                            var theUrl = "http://localhost:8080/formswebapp/resources/authsession";
                            $.ajax({
                                url: theUrl,
                                type: "POST",
                                dataType: "text",
                                contentType: "application/x-www-form-urlencoded",
                                data: dataObj,

                                success: function(result, status, jqxhr) {
                                    //alert("success: " + status);

                                    var token = JSON.parse(result);
                                    //alert(token);
									var e = new Date;
									e.setTime(e.getTime()+(60*60*1000));
									var expires = "; expires="+e.toGMTString();
									document.cookie = "token="+token+expires;
									
									
                                    var output = "<h3>Logged In</h3>";
									alert("Logging in...")
									window.location.href = "http://localhost:8080/formswebapp/user.html"

                                },
                                error: function(xhr, status, errorThrown) {
                                    //alert("error: " + status + " e: " + errorThrown);
									alert("Can't log in! "+errorThrown);
                                }
                            });

                       });

  });                 				
	</script>
</head>

<body>
	<div class = "navbar navbar-inverse navbar-static-top">
		<div class="container">
			<div class = "navbar-header">
			<div class="tut-container-img">
						<img class="img-responsive" src="cculogo.png" alt="">
					
					</div>
				
			
				<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
					<span class = "icon-bar"></span>
					<span class = "icon-bar"></span>
					<span class = "icon-bar"></span>
				</button><!--Create button for mobile site-->
			</div>
			<div class = "collapse navbar-collapse navHeaderCollapse">
				<ul class = "nav navbar-nav navbar-right">
					
					
					
					<li class = "dropdown">
						<a href = "#" class = "dropdown-toggle" data-toggle ="dropdown">Social Media <b class="caret"></b></a>
						<ul class = "dropdown-menu">
							<li><a href = "http://twitter.com">Twitter</a></li>
							<li><a href = "http://facebook.com">Facebook</a></li>
							<li><a href = "https://plus.google.com/">Google+</a></li>
							<li><a href = "http://instagram.com">Instagram</a></li>
						</ul>
					</li>
					<li><a href = "#about" data-toggle ="modal">About</a></li>
					<li><a href = "#contact" data-toggle ="modal">Contact</a></li>
					<li>
						<form class="navbar-form" role="search">
						<div class="input-group">
							<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
							<div class="input-group-btn">
								<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
							</div>
						</div>
						</form>
					</li>
				</ul>
			</div>	
		</div>
	</div>
	<div id ="login">
	<div class ="container">
		<div class = "row">
			<div class = "col-lg-9">
				<div class ="panel panel-default">
					<div class ="panel-body">
						<div class= "page-header">
						<p></p>
						
						<h3><b>Log In</b></h3>
						<div class = "modal-footer"><a href="https://www.coastal.edu/search/pin" target="_blank">What's My Username &amp; Password?</a></div>
						
						
						<p></p>
						
						<form class="form-horizontal" role="form" autocomplete="on" >
							<div class="form-group">
								<label for="Name" class="col-lg-2 control-label">* User Name</label>
								<div class="col-sm-4">
									<input type="text" class ="form-control" id="t_loginName" placeholder=" User Name goes here" autofocus required  >
								</div>
							</div>
							
							<div class="form-group">
								<label for="text" class="col-lg-2 control-label">* Password</label>
								<div class="col-sm-4">
									<input type="text" class ="form-control" id="t_loginPass" placeholder="Password goes here" required >
								</div>
							</div>
							
							<div class="form-group">
							<div class="checkbox">
									<label><input type="checkbox">Remember me</label>
								</div>
							</div>
							<p>(*) Indicates required field.</p>
							
							<div class = "modal-footer">
								<button class = "btn btn-default" type="reset">Clear</button>
								<button class ="btn btn-inverse" id="btnLogin" type="button"> Submit and login</button>
							</div>	
						</form>
						</div>
					</div>
				</div>	
			</div>	
			<div class = "col-lg-3">
				<div class="list-group">
					<a href ="#" class ="list-group-item">
						<p class= "list-group-item-text">
						
							<img src="img/chant.jpg">
						
						</p>
					</a>
				</div>
			</div>
		</div>
	</div>
	</div>
	<div id="footerlinks">    
	  <a href="http://www.coastal.edu/policies">University Policies&nbsp</a><b>|</b>
	  <a href="http://www.coastal.edu/sitepolicies/index.html">&nbspSite Policies&nbsp</a><b>|</b>
	  <a href="http://www.coastal.edu/contactus/index.html">Contact Us</a>         
    </div>
	<!--Footer-->
	<div class = "navbar navbar-inverse navbar-fixed-bottom">
		<div>
			<p class = "navbar-text pull-right">2014 Coastal Carolina University | P.O. Box 261954, Conway, SC 29528-6054 USA | +1 843-347-3161</p>
		</div>
	</div>
</body>

</html>